import React from 'react'
// ===================================================================== global template
const BtnGroup = window.$Lazy.load(()=>import('#tp/btn-group'))
// ===================================================================== component
const Index = ({title, size=8, className, suffix, prefix, controls, style, required, onDoubleClick}) => (
	title && (
		<div className={`fxmj h38 ${className||''}`} style={style}>
			<div className='fxm b g3 f12 ex'>
				<i className='r100px mr10 bcm' style={{width:size,height:size}}></i>
				<b onDoubleClick={onDoubleClick} className={`nosel ${onDoubleClick?'cp':''}`} onClick={e=>e.stopPropagation()}>{title}</b>
				{ required && <i className='f12' style={{color:'red', marginLeft:3}}>*</i>}
			</div>
			{prefix}
			{
				controls && (
					<div className='group-btn'>
						<BtnGroup controls={controls} />
					</div>
				)
			}
			{suffix}
		</div>
	)
)

export default Index